<template>
  <div class="home">
    <div class="top">
      <div class="top-select">
        <router-link to="/home/search">
          <van-search v-model="value" placeholder="商品搜索" shape="round" />
        </router-link>
      </div>
      <router-link to="/home/map" class="top-map">
        <p>{{ city }}</p>
        <img src="@/assets/down.png" alt="" />
      </router-link>
    </div>

    <div class="swipe-item">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in homeInfo.banner" :key="item.id">
          <img class="banner" :src="item.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <ul class="homechannel">
      <li
        v-for="item in homeInfo.channel"
        :key="item.id"
        @click="goCategory(item.id)"
      >
        <img :src="item.icon_url" alt="" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <div class="brandList">
      <p class="brandList-title" @click="gobrand">品牌制造商直供</p>
      <div class="info">
        <div
          class="info-item"
          v-for="item in homeInfo.brandList"
          :key="item.id"
          @click="godetail(item.id)"
        >
          <div class="info-mes">
            <p class="name">{{ item.name }}</p>
            <p class="price">{{ item.floor_price }}元起</p>
          </div>
          <img :src="item.new_pic_url" alt="" />
        </div>
      </div>
    </div>
    <router-link to="/home/list?id=1&title=新品首发">
      <div class="new">
        <img src="../../assets/newProduct.png" alt="" />
      </div>
    </router-link>

    <div class="productlist">
      <div class="list-item" v-for="item in homeInfo.newGoods" :key="item.id" @click="goGoodsdetail(item.id)">
        <img :src="item.list_pic_url" alt="" />
        <div class="productlist-info">
          <p class="productlist-name">{{ item.name }}</p>
          <p class="productlist-brief">{{ item.goods_brief }}</p>
          <p class="productlist-price">¥{{ item.retail_price }}</p>
        </div>
      </div>
    </div>

    <router-link to="/home/list?id=2&title=好物推荐">
      <div class="hot">
        <img src="../../assets/hot.png" alt="" />
      </div>
    </router-link>

    <div class="productlist">
      <div class="list-item" v-for="item in homeInfo.hotGoods" :key="item.id" @click="goGoodsdetail(item.id)">
        <img :src="item.list_pic_url" alt="" />
        <div class="productlist-info">
          <p class="productlist-name">{{ item.name }}</p>
          <p class="productlist-brief">{{ item.goods_brief }}</p>
          <p class="productlist-price">¥{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
    <div class="topic">
      <p class="topic-title">专题精选</p>
      <div class="topic-item">
        <div
          class="topic-card"
          v-for="item in homeInfo.topicList"
          :key="item.id"
        >
          <img :src="item.item_pic_url" alt="" />
          <p class="topic-card-tp">
            <span class="topic-card-title">{{ item.title }}</span>
            <span class="topic-card-price">{{ item.price_info }}元起</span>
          </p>
          <p class="topic-card-subtitle">{{ item.subtitle }}</p>
        </div>
      </div>
    </div>

    <div class="category-list">
      <div
        class="category-item"
        v-for="item in homeInfo.newCategoryList"
        :key="item.id"
      >
        <p class="item-title">{{ item.name }}好物</p>
        <div class="item-flex">
          <div class="item" v-for="item1 in item.goodsList" :key="item1.id" @click="goGoodsdetail(item1.id)">
            <img :src="item1.list_pic_url" alt="" />
            <p class="item-name">{{ item1.name }}</p>
            <p class="item-price">¥{{ item1.retail_price }}</p>
          </div>
          <div class="last-item">
            <p class="white-name">{{ item.name }}好物</p>
            <img src="../../assets/icon-next.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/home/index";
import { mapState } from "vuex";

export default {
  name: "Index",

  data() {
    return {
      homeInfo: [],
      value: "",
      city:""
    };
  },

  created() {
    
    index().then((res) => {
      this.homeInfo = res;
      // console.log(this.homeInfo.channel);
    });

    var address = this.cityInfo.name
    if(address){
      this.city = address
      return
    }else{
      var _this = this;
      AMap.plugin('AMap.CitySearch', function () {
      var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            _this.city = result.city;
          }
        })
      })
    }
    
  },

  mounted() {

  },

  methods: {
    goCategory(val){
      this.$router.push({
        name: 'categoryList',
        query:{
          id:`${val}`,
        }
      })
    },

    gobrand(){
      this.$router.push('./home/brand')
  },
  godetail(val){
      this.$router.push({
            name:'brandDetail',
            query:{
               id:val 
            }
        })
    },
    goGoodsdetail(val){
      this.$router.push({
            name:'categoryGoodsdetail',
            query:{
               id:val 
            }
        })
    }

  },
  computed:{
    ...mapState(["cityInfo"])
  }
};
</script>

<style scoped lang="scss">
@import "scss/index.scss";
* {
  margin: 0;
  padding: 0;
}
</style>